<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="params.name" clearable placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="searchBtn">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/enterprise/add')">添加企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="list" @expand-change="expandHandle">
        <el-table-column type="expand">
          <!-- 表格区域 -->
          <template #default>
            <el-table :data="rentList">
              <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
              <el-table-column label="租赁起始时间" prop="startTime" />
              <el-table-column label="合同状态" prop="status">
                <template #default="{ row }">
                  <span>{{ row.status === 0 ? '待生效' : (row.status === 1 ? '生效中' : (row.status === 2 ? '已到期' : (row.status
                    === 3 ? '已退租' : '无') )) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="{ row }">
                  <el-button :disabled="row.status===2 || row.status === 3" size="mini" type="text" @click="cancelRent(row.id)">退租</el-button>
                  <el-button :disabled="row.status===0 || row.status === 1" size="mini" type="text" @click="deletePark(row.id)"> 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column label="联系电话" prop="contactNumber" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="mini" type="text" @click="add(row.id)">添加合同</el-button>
            <el-button size="mini" type="text" @click="$router.push(`/enterprise/look/${row.id}`)">查看</el-button>
            <el-button size="mini" type="text" @click="$router.push(`/enterprise/add/${row.id}`)">编辑</el-button>
            <template>
              <el-button size="mini" type="text" @click="open(row.id)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        background
        :page-size="3"
        :page-sizes="[3, 5, 10, 20]"
        layout="total ,prev, pager, next, sizes"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <contract ref="upload" :rent-dialog-visible.sync="rentDialogVisible" />
  </div>
</template>

<script>

import contract from './components/contract.vue'
import { deleteParkAPI, getParkListAPI, getCurrentCompanyRentalList, cancelRentAPI, deleteParkRentAPI } from '@/api/park'
export default {
  components: { contract },
  data() {
    return {
      rentDialogVisible: false, // 是否显示弹框
      // currentId: '',
      list: [], // 列表数据
      rentList: [], // 租赁列表
      total: null, // 总条数
      params: { // 分页参数
        page: 1,
        pageSize: 3,
        name: ''
      }

    }
  },
  created() {
    this.getCompanyList()
  },
  methods: {
    // 退租
    async cancelRent(id) {
      await cancelRentAPI(id)
      this.$message.success('退租成功')
      // 更新数据
      this.getCompanyList()
    },
    // 删除企业租赁信息
    async deletePark(id) {
      await deleteParkRentAPI(id)
      this.$message.success('删除成功')
      this.getCompanyList()
    },
    // 展开行 获取企业的租赁信息列表
    async expandHandle(row, expandedRows) {
      // console.log('row', row)
      // console.log('expandedRows', expandedRows)
      // 判断id是否相等 如果相等 获取租赁信息列表 , 如果不相等 获取租赁信息列表
      // console.log(Array.isArray(expandedRows))
      const flag = expandedRows.some((item) => item.id === row.id)
      if (flag) {
        const res = await getCurrentCompanyRentalList(row.id)
        this.rentList = res.data
        console.log('rentList', this.rentList)
      }
    },
    // 点击添加合同按钮 ,显示弹框,传递当前id
    add(id) {
      this.rentDialogVisible = true
      console.log('di:', id)
      this.$refs.upload.getID(id)
    },
    // 删除按钮的点击事件
    open(id) {
      this.$confirm('确定删除该企业吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 发送请求
        await deleteParkAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 更新数据
        this.getCompanyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    searchBtn() {
      this.params.page = '1'
      this.getCompanyList()
    },
    // 分页
    handleCurrentChange(val) {
      this.params.page = val
      this.getCompanyList(this.params)
    },
    // 获取企业列表
    async getCompanyList() {
      const { data: { rows, total }} = await getParkListAPI(this.params)
      // console.log(res)
      this.list = rows
      this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
